
import ReactECharts from "echarts-for-react"
import { useEffect } from "react";
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
import "gantt-task-react/dist/index.css";
const ViewAbout = () => {
    // 柱状图配置项
    const tasks: Task[] = [
        {
            start: new Date(2020, 1, 1),
            end: new Date(2020, 1, 2),
            name: 'Idea',
            id: 'Task 0',
            type: 'task',
            progress: 45,
            isDisabled: true,
            styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
        },
        {
            start: new Date(2020, 1, 2),
            end: new Date(2020, 1, 3),
            name: 'Idea',
            id: 'Task 1',
            type: 'task',
            progress: 45,
            isDisabled: true,
            styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
        },
    ];

    useEffect(() => {

    }, [])
    // 自定义工具提示
    const CustomTooltip = ({ task }) => (
        <div>
            <strong>{task.name}</strong>
            <p>开始: {task.start.toLocaleDateString('zh-CN')}</p>
            <p>结束: {task.end.toLocaleDateString('zh-CN')}</p>
        </div>
    );

    return (
        <>
            <div>
                {/* <ReactECharts
                    option={option}
                    className={"h-52 w-52"}
                    notMerge={true}
                    lazyUpdate={true}
                /> */}
                <Gantt
                    TooltipContent={CustomTooltip}
                    tasks={tasks}
                    locale="zh-CN"
                />
            </div>
        </>

    )
}
export default ViewAbout
